<template>
  <view>
    <!-- 头部自定义内容 -->
    <custom-header-vue :customTitle="customTitle" class="header" :backIcon="true">
      <!-- 具名插槽---区域类型 -->
      <template v-slot:custom>
        <view class="header-field-title">
          <view v-for="(item,index) in titleList" :key="index">
            <view class="header-field-title-name" v-if="item!='line'">
              <view class="name" :class="{'name-active':index == chooseIndex}" @click="choose(index)">
                {{item}}
              </view>
            </view>
            <view class="header-field-title-split" v-else></view>
          </view>
        </view>
      </template>
    </custom-header-vue>
    <!-- 订桌记录 -->
    <room-detail-vue :topHeight="topHeight" v-if="chooseIndex == 0" :customId="customId"></room-detail-vue>
    <!-- 标签内容 -->
    <sign-detail-vue :topHeight="topHeight" v-if="chooseIndex == 6" :customId="customId"></sign-detail-vue>
    <!-- 存取酒内容 -->
    <save-detail-vue :topHeight="topHeight" v-if="chooseIndex == 2" :customId="customId"></save-detail-vue>
    <!-- 充值记录 -->
    <charge-detail-vue :topHeight="topHeight" v-if="chooseIndex == 4" :customId="customId"></charge-detail-vue>
    <!-- 关联销售 -->
    <sales-detail-vue :topHeight="topHeight" v-if="chooseIndex == 8" :customId="customId"></sales-detail-vue>
  </view>
</template>

<script setup>
import {
  onMounted,
  ref,
  getCurrentInstance
} from 'vue';
import {
  onLoad
} from '@dcloudio/uni-app'
import customHeaderVue from '@/components/customHeader.vue'
import signDetailVue from '@/pages/application/custom_ana_child/signDetail.vue'
import saveDetailVue from '@/pages/application/custom_ana_child/saveDetail.vue'
import chargeDetailVue from '@/pages/application/custom_ana_child/chargeDetail.vue'
import roomDetailVue from '@/pages/application/custom_ana_child/roomDetail.vue'
import salesDetailVue from '@/pages/application/custom_ana_child/salesDetail.vue'

const instance = getCurrentInstance()
const commonJs = instance?.proxy?.$commonJs
const shopIndex = ref(commonJs.getChooseShopIndex())
const shopList = ref(commonJs.getShopList())
const customTitle = ref('客户详情')
const customId = ref(0)
const topHeight = ref(0)
const scollHeight = ref(0)
const titleList = ref(['消费', 'line', '存取酒', 'line', '充值', 'line', '标签', 'line', '关联销售'])
const chooseIndex = ref(0)
onLoad((e) => {
  if (e && e.hasOwnProperty('name') && e.hasOwnProperty('phone') && e.hasOwnProperty('id')) {
    customTitle.value = e.name + '(' + e.phone + ')'
    customId.value = e.id
  }
})
onMounted(() => {
  const query = uni.createSelectorQuery().in(this);
  query.select(".header")
      .boundingClientRect((data) => {
        topHeight.value = data.height
        let height = '100vh',
            top = data.height + 'px'
        scollHeight.value = `calc(${height} - ${top})`
      })
      .exec();
})
const choose = (index) => {
  chooseIndex.value = index
}
</script>

<style scoped lang="scss">
.header-field-title {
  display: flex;
  flex-direction: row;
  padding: 0 30rpx;
  justify-content: space-between;
  height: 90rpx;
  line-height: 90rpx;
  align-items: center;

  .header-field-title-split {
    height: 30rpx;
    width: 2rpx;
    background: var(--white-text);
    transform-origin: top left;
    transform: scaleX(0.3);
  }

  .header-field-title-name {
    display: flex;
    flex-direction: row;

    .name {
      font-size: 28rpx;
      color: var(--grey-text);
    }

    .name-active {
      color: #5697D7;
    }
  }
}
</style>